<template>
    <div class="table-box-power" :style="{overflow: 'hidden',position: 'relative',}">
        <a-table
            :columns="columns"
            :pagination="false"
            :dataSource="data"
            rowKey="id"
            :row-selection="{
                selectedRowKeys,
                onChange: tableChange,}"
            size="middle">
            <template #operation>
                <div class="table-title-box space-between">
                    <span class="table-title">操作</span>
                </div>
            </template>
            <template slot="Controls" slot-scope="text, record">
                <div class="operation-box">
                    <a-icon type="edit" title="编辑" class="icon-style"/>
                    <a-icon type="delete" title="删除" class="icon-style"/>
                </div>
            </template>
        </a-table>
        <!-- 表格的操作 -->
        <div class="table-footer">
            <div class="operation-btn">
                <a-button size="small" v-if="allSelected" @click="allSelect(false)">取消全选</a-button>
                <a-button size="small" v-else @click="allSelect(true)">全选当前页</a-button>
            </div>
            <pagination
                :page.sync="pagination.page"
                :pageSize.sync="pagination.pageSize"
                :total.sync="total"
                @paginationChange="paginationChange"
            ></pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pagination: {
                page: 1,
                pageSize: 50,
            },
            columns: [
                {
                    title: "名称",
                    width: 200,
                    dataIndex: "title",
                    key: "title",
                    fixed: "left",
                    ellipsis: true,
                },
                {
                    title: "维保时间",
                    width: 200,
                    dataIndex: "maintenanceTime",
                    key: "maintenanceTime",
                },
                {
                    dataIndex: "maintenanceType",
                    key: "maintenanceType",
                    title: "维保系统时间",
                },
                {
                    dataIndex: "maintenanceObject",
                    key: "maintenanceObject",
                    title: "维保对象",
                },
                {
                    dataIndex: "adminUser",
                    key: "adminUser",
                    title: "管理者",
                },
                {
                    dataIndex: "createTime",
                    key: "createTime",
                    title: "创建时间",
                },
                {
                    width: 200,
                    dataIndex: "",
                    key: "",
                    fixed: "right",
                    slots: {
                        title: "operation",
                    },
                    scopedSlots: {customRender: "Controls"},
                },
            ],
            selectedRowKeys: [],
        };
    },
    props: {
        data: {
            type: Array,
            default: () => [],
        },
        total: {
            type: Number,
            default: 0,
        },
    },
    methods: {
        paginationChange(data) {
            // 分页变化
            this.$emit("requestTable", data);
        },
        tableChange(rowkeys, rows) {
            this.selectedRowKeys = rowkeys;
        },
        // 全选、全不选
        allSelect(flag) {
            // 判断是否全选
            if (flag) {
                for (let i = 0; i < this.data.length; i++) {
                    if (!this.selectedRowKeys.includes(this.data[i].id)) {
                        this.selectedRowKeys.push(this.data[i].id);
                    }
                }
            } else {
                let dealKeys = this.data.map((item) => {
                    return item.id;
                });
                this.selectedRowKeys = this.selectedRowKeys.filter((item) => {
                    return !dealKeys.includes(item);
                });
            }
        },
        // 提交采集、监控
        handleOk() {
            this.$refs.modalForm.validate((valid) => {
                if (valid) {
                    const requestData = {
                        stationId: this.rowData.id,
                        deviceSn: this.modalForm.deviceSn,
                        deviceType: this.flag,
                    };

                } else {
                    return false;
                }
            });
        },
        // 关闭采集、监控modal，重置表单
        handleCancel() {
            this.$refs.modalForm.resetFields();
            this.visible = false;
        },
        // 打开采集、监控modal
        openModal(index, data) {
            this.flag = index;
            this.visible = true;
            this.rowData = data;
            this.modalForm.collectorSn = "";
        },
        // 打开抽屉
        opendrawer() {
            this.drawerVisible = true;
        },
        closeDrawer() {
            this.drawerVisible = false;
        },
    },
    computed: {
        // 计算是否全选
        allSelected() {
            let flag = true;
            for (let i = 0; i < this.data.length; i++) {
                if (!this.selectedRowKeys.includes(this.data[i].id)) {
                    flag = false;
                    break;
                }
            }
            return flag;
        },
        // modal标题
        Title() {
            return this.flag == 1 ? "添加采集器" : "添加监控器";
        },
    },
};
</script>

<style lang="less" scoped>
.table-box-power {
    width: 100%;
    // min-height: 500px;
    .operation-box {
        display: flex;
        align-items: center;

        /deep/ .ant-rate {
            font-size: 16px;
        }
    }

    /deep/ .ant-drawer-title {
        font-size: 12px;
    }

    .rate {
        /deep/ .ant-rate-star-second {
            font-size: 16px;
        }

        margin-bottom: 2px;
    }

    .icon-style {
        margin-left: 15px;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.3);
        cursor: pointer;

        &:hover {
            color: #048fff;
        }
    }

    /deep/ .ant-table-header-column {
        width: 100%;
    }

    /deep/ .ant-table-wrapper {
        width: 100%;
        min-height: 500px;
        // height: ;
        // flex: 1;
    }

    .table-title-box {
        display: flex;
        align-items: center;

        .table-title {
            margin-left: 4px;
        }

        .question-icon {
            position: relative;
            z-index: 999;
            cursor: pointer;
            margin: 0 5px;

            &:hover {
                color: #048fff;
            }
        }
        .setting {
            margin-right: 20px;
            font-size: 16px;
        }
    }

    .space-between {
        justify-content: space-between;
    }

    /deep/ .ant-table-content {
        font-size: 12px;
        color: #515561;
    }

    .table-footer {
        display: flex;
        justify-content: space-between;
        // height: 48px;
        padding: 12px 16px;
        width: 100%;
        // height: 64px;
        .operation-btn {
            /deep/ .ant-btn {
                font-size: 12px;
                margin-right: 8px;
            }
        }
    }
}

/deep/
.ant-table-thead
> tr
> th
.ant-table-column-sorter
.ant-table-column-sorter-inner-full {
    margin-top: -12px;
}

/deep/ .ant-table td {
    white-space: nowrap;
}
</style>
